import React, { Component, useState, useEffect } from 'react'
import CatUrl from '../assets/cat.gif'

import position from '../position'

export default function Cat() {
  // // 用来存储鼠标坐标的状态值
  // let [x, setX] = useState(0)
  // let [y, setY] = useState(0)
  let { x, y } = position()
  x += 200
  y -= 50

  // // 组件挂载的时候要监听鼠标移动事件
  // useEffect(() => {
  //   window.addEventListener('mousemove', handle)
  //   return () => {
  //     window.removeEventListener('mousemove', handle)
  //   }
  // }, [])

  // function handle(e) {
  //   setX(e.clientX)
  //   setY(e.clientY)
  // }
  return (
    <div>
      <img
        src={CatUrl}
        alt=""
        style={{ position: 'absolute', left: x, top: y }}
      />
    </div>
  )
}
